<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-11-04 09:39:50
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-10-26 14:45:39
 * @FilePath: \backstage - 副本\src\components\el-table.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
    <div class="app-container-zdgy1">
        <el-table :data="dataList" default-expand-all v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.2)"
            border fit :highlight-current-row="currentRow" style="width: 100%;" :height="height"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :row-key="rowKey"
            @selection-change="handleSelectionChange" :stripe="stripe" @sort-change="handleSortChange"
            :cell-class-name="classCell" @row-click="rowChange" :row-class-name="tableRowClassName">
            <!-- :span-method="mouseEnter" -->
            <!-- 是否有多选 -->
            <el-table-column type="selection" width="55" v-if="table_config.isCheckBox"></el-table-column>
            <!-- 是否需要序号 -->
            <el-table-column type="index" :index="hIndex" label="序号" width="55" align="center"
                v-if="table_config.isIndex" />

            <el-table-column v-for="item in table_config.thead" :key="item.prop" :prop="item.prop" :label="item.label"
                :min-width="item.minWidth" :sortable="item.sortable ? true : false" :align="item.align">
                <template slot-scope="scope">
                    <!-- 有状态过滤 -->
                    <span v-if="(item.filter && !item.btn)" :class="item.specialClass && item.specialClass(scope.row)">
                        {{ item.callback && item.callback(scope.row) }}
                    </span>
                    <el-button size="mini" v-else-if="(item.filter && item.btn)"
                        :type="item.specialClass && item.specialClass(scope.row)"
                        :class="item.specialClass && item.specialClass(scope.row)">{{ item.callback &&
                            item.callback(scope.row)
                        }}</el-button>
                    <el-button v-else-if="item.Jump" size="small" style="padding: 0 !important; margin: 0"
                        @click="ClickOnLine(scope.row, item.label)" @cell-dblclick="ClickOnLine" type="text">
                        {{ scope.row[item.prop] }}
                    </el-button>

                    <el-input v-else-if="item.edit" v-model="scope.row[item.prop]" :type="item.type"
                        :ref="'fParam' + item.column" :placeholder="placeholderText" @keyup.native="
                            moveFocus(
                                $event,
                                item.column,
                                scope.$index,
                                table_config.Keyboard,
                                table_config.keyNum
                            )
                            " @input="
        input(
            scope.row,
            dataList,
            item.type,
            item.prop,
            scope.row[item.prop]
        )
        " :disabled="item.disabled" min="0"></el-input>
                    <!-- <div v-else-if="item.option"></div> -->
                    <el-select class="selectOptions" @change="
                        input(
                            scope.row,
                            dataList,
                            item.type,
                            item.prop,
                            scope.row[item.prop]
                        )
                        " v-else-if="item.option" v-model="scope.row[item.prop]" placeholder="请选择"
                        :disabled="item.disabled">
                        <el-option v-for="i in item.options" :key="i.value" :label="i.label" :value="i.value">
                        </el-option>
                    </el-select>
                    <!-- 图片展示 -->
                    <div v-else-if="item.image" style="
                display: flex;
                height: 100%;
                align-items: center;
                flex-shrink: 0;
              ">
                        <div v-for="(v, index) in scope.row[item.prop]" v-viewer :key="index" style="
                  margin: 2px 3px;
                  display: flex;
                  flex-shrink: 0;
                  align-items: center;
                ">
                            <img style="
                    max-width: 100%;
                    max-height: 100%;
                    width: 18px;
                    height: 20px;
                  " :src="v[table_config.imgKeyWord]" />
                        </div>
                    </div>
                    <!-- 文件 -->
                    <div v-else-if="item.file" style="
                display: flex;
                height: 100%;
                align-items: center;
                flex-shrink: 0;
              ">
                        <div v-for="(v, index) in scope.row[item.prop]" @click="openPdfs(v)" :key="index" style="
                  margin: 2px 3px;
                  display: flex;
                  flex-shrink: 0;
                  align-items: center;
                ">
                            <img style="
                    max-width: 100%;
                    max-height: 100%;
                    width: 18px;
                    height: 20px;
                  " src="@/assets/img/pdf.png" />
                        </div>
                    </div>
                    <!-- <img v-else-if="item.image" :src="scope.row[item.prop]" style="width:40px; height: 40px"> -->
                    <!-- switch开关 -->
                    <el-switch v-else-if="item.switch" v-model="scope.row[item.prop]" active-text="启用" active-value="1"
                        inactive-value="0" inactive-text="停用" @change="item.callback && item.callback(scope.row)">
                    </el-switch>
                    <!-- detail -->
                    <el-button v-else-if="item.detail" @click="openDialog(scope.row)" @cell-dblclick="openDialog"
                        type="text" size="small" style="padding: 0 !important; margin: 0">
                        {{ scope.row[item.prop] }}
                    </el-button>
                    <!-- 有跳转 -->
                    <router-link v-else-if="item.router" :to="{
                        path: item.routerPath,
                        query: { name: scope.row[item.prop] },
                    }">
                        {{ scope.row[item.prop] }}
                    </router-link>
                    <!-- 默认展示 -->
                    <span v-else>
                        <span v-if="level.length > 0">
                            <el-tooltip :disabled="!dataList[3][item.prop] || scope.row.name != '重量偏差(%)'
                                " class="item" effect="dark" placement="top-start">
                                <div slot="content" v-html="dataList[3][item.prop]" v-if="dataList[3][item.prop] != null &&
                                    scope.row.name == '重量偏差(%)'
                                    "></div>
                                <span class="title">
                                    {{ scope.row[item.prop] }}
                                </span>
                            </el-tooltip>
                        </span>
                        <span v-else>
                            <!-- 卡卡{{ scope.row[item.prop] }} -->
                            <!-- <a href="javascript:;" style="color: #000 !important;" :title="scope.row[item.prop]">{{
                                                                                                                                                                                                                                                                          scope.row[item.prop] }}</a> -->
                            <el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :open-delay="500"
                                :content="scope.row[item.prop] + ''" placement="top">
                                <div class="linkTo">
                                    <!-- @mouseover="onMouseOver(scope.row[item.prop] + item.prop, scope.$index)" -->
                                    <span class="title" :ref="scope.row[item.prop] + item.prop">
                                        {{ scope.row[item.prop] }}
                                    </span>
                                </div>
                            </el-tooltip>
                        </span>
                    </span>
                </template>
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column fixed="right" :label="table_config.operation.label" :width="table_config.operation.width"
                align="center" v-if="isShow">
                <template slot-scope="scope">
                    <div style="display: flex; justify-content: space-around">
                        <template v-if="table_config.operation.cols && !table_config.operation.detail
                            ">
                            <div class="btn" v-for="item in table_config.operation.cols.slice(0, 2)" :key="item.label">
                                <el-button @click="item.handleRow(scope.row, item.label)" :type="item.type" size="small">
                                    {{ item.label }}
                                </el-button>
                            </div>
                        </template>
                        <template v-if="table_config.operation.cols &&
                            table_config.operation.detail &&
                            !table_config.operation.prop
                            ">
                            <div @click="openDialog(scope.row, item.label)" @cell-dblclick="openDialog"
                                style="color: #409eff !important; cursor: pointer"
                                v-for="item in table_config.operation.cols.slice(0, 2)" :key="item.label">
                                {{ item.label }}
                            </div>
                        </template>
                        <template v-if="table_config.operation.cols &&
                            table_config.operation.detail &&
                            table_config.operation.prop
                            ">
                            <div @click="openDialog(scope.row, item.label)" @cell-dblclick="openDialog"
                                style="cursor: pointer; color: #409eff !important" :style="{
                                    color: table_config.operation.specialClass(
                                        scope.row[item.prop]
                                    ),
                                }" v-for="item in table_config.operation.cols.slice(0, 2)" :key="item.label">
                                {{ item.label }}{{ scope.row[item.prop] }}
                            </div>
                        </template>
                    </div>

                    <!-- 操作列超过3个，用更多下拉显示 -->
                    <el-dropdown v-if="isShowOperationCols">
                        <span class="el-dropdown-link">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="item in table_config.operation.cols.slice(2)" :key="item.label"
                                @click.native="item.handleRow(scope.row, item.label)">
                                {{ item.label }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
            <template slot="empty" v-if="nodata">
                <img style="width: 285px; height: 208px" src="@/assets/img/undata.png" alt="" />
                <div class="pageFlagText">暂时没有数据哦！</div>
            </template>
        </el-table>
        <div class="app-container-table-pagination" v-if="issss">
            <el-pagination :background="background" :page-sizes="pageSizes" :current-page.sync="currentPage"
                :page-size.sync="pageSize1" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :layout="layout" :total="total">
            </el-pagination>
        </div>
        <!-- 附件展示 -->
        <div class="Control-2">
            <el-dialog top="4vh" :title="fFileName" :visible.sync="dialogPdf">
                <div :style="{ height: '800px' }" style="border: 1px solid red">
                    <iframe :src="pdfUrl" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </el-dialog>
        </div>
        <pdfDialog :dialogVisible="dialogVisibles" @closes="closeDialog" :fileDetail="fileDetail"></pdfDialog>
    </div>
</template>
<script>
import pdfDialog from "@/components/public/pdf-dialog";

export default {
    props: {
        background: {
            type: Boolean,
            default: true
        },
        treelength: {
            type: Boolean,
            default: false
        },
        issss:{
            type: Boolean,
            default: true
        },
        info: {
            type: Object,
            default: () => {
                return {}
            }
        },
        pageSizes: {
            type: Array,
            default: () => {
                return [15, 30, 60, 100]
            }
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper'
        },
        total: {
            required: true,
            type: Number,
            default: 0
        },
        pageNum: {
            type: Number,
            default: 1
        },
        limit: {
            type: Number,
            default: 10
        },
        config: {
            type: Object,
            default: () => { },
        },
        nodata: {
            type: Boolean,
            default: true,
        },
        rowKey: {
            type: String,
            default: "fId",
        },
        currentRow: {
            type: Boolean,
            default: true,
        },
        stripe: {
            type: Boolean,
            default: true,
        },

        dataList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        page: {
            type: Number,
            default: 1,
        },
        height: {
            type: String,
            default: "100%",
            // calc(100% - 50px)
        },
        pageSize1: {
            type: Number,
            default: 15,
        },
        loading: {
            type: Boolean,
            default: false,
        },
        statusType: {
            type: String,
            default: "0",
        },
        level: {
            type: Array,
            default: () => {
                return [];
            },
        },
        earlyWarning: {
            type: Array,
            default: () => {
                return [];
            },
        },
        placeholderText: {
            type: String,
            default: "请输入",
        },
    },
    components: {
        pdfDialog,
    },

    data() {
        return {
            table_config: {
                imgKeyWord: "",
                fileKeyWord: "",
                fileName: "",
                classCell: false,
                Keyboard: false,
                keyNum: [0, 0],
                dialogHeight: "800px",
                thead: [], // 表格头
                isCheckBox: false, // 是否多选
                isIndex: false, // 是否有序号
                isOperation: true, // 是否有操作列表
                operation: {
                    // 操作
                    cols: [],
                },
            },
            // 附件名称
            fFileName: null,
            // 附件地址
            pdfUrl: null,
            // 附件展示
            dialogPdf: false,
            dialogVisibles: false,
            fileDetail: {},
            earlyWarningText: "",
            flag: 0,
            isShowTooltip: false,
        };
    },
    computed: {
        isShow() {
            return (
                this.table_config.isOperation && this.table_config.operation.cols.length
            );
        },
        isShowOperationCols() {
            let list = this.table_config.operation.cols;
            return list.length && list.length > 2;
        },
        hIndex() {
            // console.log((this.page - 1) * this.pageSize + 1);
            // 当前页数 - 1 * 每页数据条数 + 1

            return (this.page - 1) * this.pageSize + 1;
        },
        currentPage: {
            get() {
                return this.pageNum
            },
            set(val) {
                this.$emit('update:pageNum', val)
            }
        },
        pageSize: {
            get() {
                return this.limit
            },
            set(val) {
                this.$emit('update:limit', val)
            }
        }
    },
    watch: {
        // dialogHeight
        // 监听传过来的config，进行初始化
        config: {
            handler(newVal) {
                // console.log(newVal);
                if (newVal) {
                    this.initConfig();
                }
            },
            immediate: true,
        },
    },
    mounted() { },
    filters: {},

    methods: {
        handleSizeChange(val) {
            this.currentPage = 1;
            this.$emit('pagination', { pageNum: this.currentPage, limit: val })
        },
        handleCurrentChange(val) {
            this.$emit('pagination', { pageNum: val, limit: this.pageSize })
        },
        onMouseOver(str, index) {
            const tag = this.$refs[str];
            console.log(tag, index);
            const parentWidth = tag[index].parentNode.offsetWidth;
            const contentWidth = tag[index].offsetWidth;
            this.isShowTooltip = contentWidth <= parentWidth;
        },
        // 关闭二级弹框
        closeDialog() {
            this.dialogVisibles = false;
        },
        // 初始化配置
        initConfig() {
            for (let key in this.config) {
                if (Object.keys(this.table_config).includes(key)) {
                    this.table_config[key] = this.config[key];
                }
            }
        },
        // 多选事件
        handleSelectionChange(val) {
            console.log(val);
            this.$emit("selection-change", val);
        },
        // 点击当前行
        rowChange(val) {
            this.$emit("click-change", val);
        },
        classCell({ rowIndex, columnIndex }) {
            if (this.statusType == "1") {
                // if (this.table_config.classCell) {
                //     if (rowIndex == 0 && columnIndex == 0) {
                //         return 'blueClass';
                //     } else if (rowIndex == 1 && columnIndex == 0) {
                //         return 'orangeClass';
                //     } else if (rowIndex == 2 && columnIndex == 0) {
                //         return 'redClass';
                //     }
                // }
            } else if (this.statusType == "2") {

                if (rowIndex == 2 && columnIndex != 0) {
                    // this.flag = 0
                    // this.earlyWarningText = ''
                    if (this.level[columnIndex] == 1) {

                        // this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]
                        return "blueClass1";
                        // return 'blueClass';
                    } else if (this.level[columnIndex] == 2) {
                        // this.flag = 0
                        // this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]

                        return "orangeClass1";
                    } else if (this.level[columnIndex] == 3) {
                        // this.flag = 0
                        // this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]

                        return "redClass1";
                    } else if (this.level[columnIndex] == 4) {
                        // this.flag = 0
                        // this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]

                        return "purple";
                    } else if (this.level[columnIndex] == 5) {
                        // this.flag = 0
                        // this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]

                        return "brown";
                    } else {
                        // this.flag = 1

                        return "defaltClass1";
                    }
                }
                // console.log(45);
            }
        },
        // 当单元格 hover 进入时会触发该事件
        mouseEnter({ rowIndex, columnIndex }) {
            if (rowIndex == 2 && columnIndex != 0) {
                if (this.level[columnIndex] == 1) {
                    this.flag = 0;
                    this.earlyWarningText = "预警标准：" + this.earlyWarning[columnIndex];
                } else if (this.level[columnIndex] == 2) {
                    this.flag = 0;
                    this.earlyWarningText = "预警标准：" + this.earlyWarning[columnIndex];
                } else if (this.level[columnIndex] == 3) {
                    this.flag = 0;
                    this.earlyWarningText = "预警标准：" + this.earlyWarning[columnIndex];
                } else if (this.level[columnIndex] == 4) {
                    this.flag = 0;
                    this.earlyWarningText = "预警标准：" + this.earlyWarning[columnIndex];
                } else if (this.level[columnIndex] == 5) {
                    this.flag = 0;
                    this.earlyWarningText = "预警标准：" + this.earlyWarning[columnIndex];
                } else {
                    this.flag = 1;
                    this.earlyWarningText = "";
                }
            }
        },
        tableRowClassName() {
            // if (rowIndex === 2) {
            //     return 'warning-row';
            // }
            // return '';
        },
        // 排序事件
        handleSortChange(val) {
            this.$emit("sort-change", val);
        },
        openDialog(row, label) {
            this.$emit("openDialog", row, label);
        },
        ClickOnLine(row, label) {
            this.$emit("ClickOnLine", row, label);
        },
        // 文件预览
        openPdfs(val) {
            this.dialogVisibles = true;
            this.fileDetail = val;
        },
        // input 输入值
        input(row, table, type, lable) {
            // console.log(row, table, type, lable);
            // if (type == "number") {
            //   let value = row[lable].replace(/^(0+)|[^\d]+/g, ""); // 只能输入数字
            //   row[lable] = value - 0;
            //   console.log(value);
            // }
            this.$emit("inputValue", row, table, lable);
        },
        moveFocus(e, key, index, Keyboard, keyNum) {
            if (Keyboard) {
                if (e.code == "ArrowRight") {
                    var text1 = "fParam" + (key + 1);
                    if (key < keyNum[0]) {
                        this.$refs[text1][index].focus();
                    }
                    //     this.$refs['fSievelower'][g].focus();
                } else if (event.code == "ArrowLeft") {
                    var text2 = "fParam" + (key - 1);
                    if (1 < key) {
                        this.$refs[text2][index].focus();
                    }
                } else if (event.code == "ArrowDown") {
                    var text3 = "fParam" + key;
                    if (index < keyNum[1]) {
                        this.$refs[text3][index + 1].focus();
                    }
                } else if (event.code == "ArrowUp") {
                    var text4 = "fParam" + key;
                    if (0 < index) {
                        this.$refs[text4][index - 1].focus();
                    }
                }
                if (event.keyCode === 13) {
                    // 回车
                    if (key < keyNum[0]) {
                        var text5 = "fParam" + (key + 1);
                        this.$refs[text5][index].focus();
                    } else if (key == keyNum[0]) {
                        if (index < keyNum[1]) {
                            key = 0;
                            key++;
                            var text6 = "fParam" + key;
                            this.$refs[text6][index + 1].focus();
                        }
                    }
                }
            }
        },
    },
};
</script>
   
<style scoped >
.btn {
    display: flex;
    justify-content: center;
    display: inline-block;
    margin: 5px 0 0 10px;
}

.bt .btn {
    display: flex;
    justify-content: center;
    display: inline-block;
    margin: 5px 0 0 10px;
}

.btn:first-child {
    margin-left: 0;
}

.color0 {
    color: #22b14c !important;
}

.color1 {
    color: #5353ef;
}

.color2 {
    color: #cdcf0b;
}

.color3 {
    color: #fdb556;
}

.el-dropdown {
    margin-left: 10px;
    cursor: pointer;
}

.app-container-zdgy1 {
    flex: 1;
    display: flex;
    height: 100%;
    flex-direction: column;
}

.pageFlagText {
    color: #171a1d;
    font-size: 16px;
}

.linkTo {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.page-content {
    text-align: right;
    margin: 10px 10px 0 0;
}
</style>